<template>
  <div class="sporadic-commodity">
    <Box title="零星商品采销商城">
      <div class="main">
        <div class="data-wrap">
          <div class="item">
            <img src="@/assets/longscreen3/mall_item1.png" alt="" class="img" />
            <div class="data">
              <count-to
                class="val"
                :startVal="0"
                :endVal="amount"
                :duration="1000"
                :decimals="2"
              ></count-to>
              <p class="key">累计交易额(万元)</p>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/longscreen3/mall_item2.png" alt="" class="img" />
            <div class="data">
              <count-to
                class="val"
                :startVal="0"
                :endVal="order"
                :duration="1000"
              ></count-to>
              <p class="key">总订单数(笔)</p>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/longscreen3/mall_item3.png" alt="" class="img" />
            <div class="data">
              <count-to
                class="val"
                :startVal="0"
                :endVal="goods"
                :duration="1000"
              ></count-to>
              <p class="key">商品总数(个)</p>
            </div>
          </div>
        </div>
        <div class="chart">
          <Echart id="zhicai-chart" :options="option" />
        </div>
      </div>
    </Box>
  </div>
</template>

<script setup>
import Box from "../box.vue";
import CountTo from "@/components/vueCountTo/vue-countTo.vue";
import { ajax } from "@/store/service";
import { ref, onMounted } from "vue";
import { dataGroup } from "@/utils";
import Echart from "@/components/echart/index.vue";
import opt from "./opt";

const option = ref({ ...opt });

const amount = ref(0);
const order = ref(0);
const goods = ref(0);

const init = async () => {
  const [res] = await ajax.zhicai();
  amount.value=res.amount
  order.value=res.order
  goods.value=res.goods
  const chart = dataGroup(res.chart);
  option.value.xAxis[0].data = chart.x;
  option.value.series[0].data = chart.y;
};

onMounted(() => {
  init();
});
</script>
<style scoped lang='scss'>
.sporadic-commodity {
  .main {
    height: 373px;
    padding-top: 27px;
    box-sizing: border-box;

    .data-wrap {
      display: flex;
      justify-content: space-between;
      padding: 0 15px;
      margin-bottom: 28px;
      .item {
        height: 104px;
        width: 220px;
        display: flex;
        align-items: center;
        .img {
          height: 103px;
        }
        .data {
          margin-left: -18px;
          .key {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 400;
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
            line-height: 24px;
            text-align: left;
            font-style: normal;
          }
          .val {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: bold;
            font-size: 26px;
            color: #ffffff;
            line-height: 39px;
            text-shadow: 0px 0px 12px rgba(0, 128, 255, 0.6);
            text-align: left;
            font-style: normal;
          }
        }
      }
    }
    .chart {
      height: 215px;
    }
  }
}
</style>